<%-- 
    Document   : register_MainPage
    Created on : 8-mei-2012, 21:33:27
    Author     : Sujen
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<html>
    <head>
 <link href="css/calendar.css" rel="stylesheet" type="text/css">
        <script type="text/javascript">
            calendar = {
                month_names: ["januari","februari","maart","april","mei","juni","juli","augustus","september","oktober","november","december"],
                weekdays: ["zo", "ma", "di", "wo", "do", "vr", "za"],
                month_days: [31,28,31,30,31,30,31,31,30,31,30,31],
                //Get today's date - year, month, day and date
                today : new Date(),
                opt : {},
                data: [],

                //Functions
                /// Used to create HTML in a optimized way.
                wrt:function(txt) {
                    this.data.push(txt);
                },

                /* Inspired by http://www.quirksmode.org/dom/getstyles.html */
                getStyle: function(ele, property){
                    if (ele.currentStyle) {
                        var alt_property_name = property.replace(/\-(\w)/g,function(m,c){return c.toUpperCase();});//background-color becomes backgroundColor
                        var value = ele.currentStyle[property]||ele.currentStyle[alt_property_name];

                    } else if (window.getComputedStyle) {
                        property = property.replace(/([A-Z])/g,"-$1").toLowerCase();//backgroundColor becomes background-color

                        var value = document.defaultView.getComputedStyle(ele,null).getPropertyValue(property);
                    }

                    //Some properties are special cases
                    if(property == "opacity" && ele.filter) value = (parseFloat( ele.filter.match(/opacity\=([^)]*)/)[1] ) / 100);
                    else if(property == "width" && isNaN(value)) value = ele.clientWidth || ele.offsetWidth;
                    else if(property == "height" && isNaN(value)) value = ele.clientHeight || ele.offsetHeight;
                    return value;
                },
                getPosition:function(ele) {
                    var x = 0;
                    var y = 0;
                    while (ele) {
                        x += ele.offsetLeft;
                        y += ele.offsetTop;
                        ele = ele.offsetParent;
                    }
                    if (navigator.userAgent.indexOf("Mac") != -1 && typeof document.body.leftMargin != "undefined") {
                        x += document.body.leftMargin;
                        offsetTop += document.body.topMargin;
                    }

                    var xy = new Array(x,y);
                    return xy;
                },
                /// Called when the user clicks on a date in the calendar.
                selectDate:function(year,month,day) {
                    var ths = _calendar_active_instance;
                    document.getElementById(ths.opt["input"]).value = day + "/" + month + "/" + year; // Date format is :HARDCODE:
                    ths.hideCalendar();
                },
                /// Creates a calendar with the date given in the argument as the selected date.
                makeCalendar:function(year, month, day) {
                    year = parseInt(year);
                    month= parseInt(month);
                    day	 = parseInt(day);

                    //Display the table
                    var next_month = month+1;
                    var next_month_year = year;
                    if(next_month>=12) {
                        next_month = 0;
                        next_month_year++;
                    }

                    var previous_month = month-1;
                    var previous_month_year = year;
                    if(previous_month< 0) {
                        previous_month = 11;
                        previous_month_year--;
                    }

                    this.wrt("<table>");
                    this.wrt("<tr><th><a href='javascript:calendar.makeCalendar("+(previous_month_year)+","+(previous_month)+");' title='"+this.month_names[previous_month]+" "+(previous_month_year)+"'>&lt;</a></th>");
                    this.wrt("<th colspan='5' class='calendar-title'><select name='calendar-month' class='calendar-month' onChange='calendar.makeCalendar("+year+",this.value);'>");
                    for(var i in this.month_names) {
                        this.wrt("<option value='"+i+"'");
                        if(i == month) this.wrt(" selected='selected'");
                        this.wrt(">"+this.month_names[i]+"</option>");
                    }
                    this.wrt("</select>");
                    this.wrt("<select name='calendar-year' class='calendar-year' onChange='calendar.makeCalendar(this.value, "+month+");'>");
                    var current_year = this.today.getYear();
                    if(current_year < 1900) current_year += 1900;

                    for(var i=current_year-70; i<current_year+10; i++) {
                        this.wrt("<option value='"+i+"'")
                        if(i == year) this.wrt(" selected='selected'");
                        this.wrt(">"+i+"</option>");
                    }
                    this.wrt("</select></th>");
                    this.wrt("<th><a href='javascript:calendar.makeCalendar("+(next_month_year)+","+(next_month)+");' title='"+this.month_names[next_month]+" "+(next_month_year)+"'>&gt;</a></th></tr>");
                    this.wrt("<tr class='header'>");
                    for(var weekday=0; weekday<7; weekday++) this.wrt("<td>"+this.weekdays[weekday]+"</td>");
                    this.wrt("</tr>");

                    //Get the first day of this month
                    var first_day = new Date(year,month,1);
                    var start_day = first_day.getDay();

                    var d = 1;
                    var flag = 0;

                    //Leap year support
                    if(year % 4 == 0) this.month_days[1] = 29;
                    else this.month_days[1] = 28;

                    var days_in_this_month = this.month_days[month];

                    //Create the calender
                    for(var i=0;i<=5;i++) {
                        if(w >= days_in_this_month) break;
                        this.wrt("<tr>");
                        for(var j=0;j<7;j++) {
                            if(d > days_in_this_month) flag=0; //If the days has overshooted the number of days in this month, stop writing
                            else if(j >= start_day && !flag) flag=1;//If the first day of this month has come, start the date writing

                            if(flag) {
                                var w = d, mon = month+1;
                                if(w < 10)	w	= "0" + w;
                                if(mon < 10)mon = "0" + mon;

                                //Is it today?
                                var class_name = '';
                                var yea = this.today.getYear();
                                if(yea < 1900) yea += 1900;

                                if(yea == year && this.today.getMonth() == month && this.today.getDate() == d) class_name = " today";
                                if(day == d) class_name += " selected";

                                class_name += " " + this.weekdays[j].toLowerCase();

                                this.wrt("<td class='days"+class_name+"'><a href='javascript:calendar.selectDate(\""+year+"\",\""+mon+"\",\""+w+"\")'>"+w+"</a></td>");
                                d++;
                            } else {
                                this.wrt("<td class='days'>&nbsp;</td>");
                            }
                        }
                        this.wrt("</tr>");
                    }
                    this.wrt("</table>");
                    this.wrt("<input type='button' value='Cancel' class='calendar-cancel' onclick='calendar.hideCalendar();' />");

                    document.getElementById(this.opt['calendar']).innerHTML = this.data.join("");
                    this.data = [];
                },

                /// Display the calendar - if a date exists in the input box, that will be selected in the calendar.
                showCalendar: function() {
                    var input = document.getElementById(this.opt['input']);

                    //Position the div in the correct location...
                    var div = document.getElementById(this.opt['calendar']);
                    var xy = this.getPosition(input);
                    var width = parseInt(this.getStyle(input,'width'));
                    div.style.left=(xy[0]+width+10)+"px";
                    div.style.top=xy[1]+"px";

                    // Show the calendar with the date in the input as the selected date
                    var existing_date = new Date();
                    var date_in_input = input.value;
                    if(date_in_input) {
                        var selected_date = false;
                        var date_parts = date_in_input.split("-");
                        if(date_parts.length == 3) {
                            date_parts[1]--; //Month starts with 0
                            selected_date = new Date(date_parts[0], date_parts[1], date_parts[2]);
                        }
                        if(selected_date && !isNaN(selected_date.getYear())) { //Valid date.
                            existing_date = selected_date;
                        }
                    }

                    var the_year = existing_date.getYear();
                    if(the_year < 1900) the_year += 1900;
                    this.makeCalendar(the_year, existing_date.getMonth(), existing_date.getDate());
                    document.getElementById(this.opt['calendar']).style.display = "block";
                    _calendar_active_instance = this;
                },

                /// Hides the currently show calendar.
                hideCalendar: function(instance) {
                    var active_calendar_id = "";
                    if(instance) active_calendar_id = instance.opt['calendar'];
                    else active_calendar_id = _calendar_active_instance.opt['calendar'];

                    if(active_calendar_id) document.getElementById(active_calendar_id).style.display = "none";
                    _calendar_active_instance = {};
                },

                /// Setup a text input box to be a calendar box.
                set: function(input_id) {
                    var input = document.getElementById(input_id);
                    if(!input) return; //If the input field is not there, exit.

                    if(!this.opt['calendar']) this.init();

                    var ths = this;
                    input.onclick=function(){
                        ths.opt['input'] = this.id;
                        ths.showCalendar();
                    };
                },

                /// Will be called once when the first input is set.
                init: function() {
                    if(!this.opt['calendar'] || !document.getElementById(this.opt['calendar'])) {
                        var div = document.createElement('div');
                        if(!this.opt['calendar']) this.opt['calendar'] = 'calender_div_'+ Math.round(Math.random() * 100);

                        div.setAttribute('id',this.opt['calendar']);
                        div.className="calendar-box";

                        document.getElementsByTagName("body")[0].insertBefore(div,document.getElementsByTagName("body")[0].firstChild);
                    }
                }
            }
            
            function LoadTextBoxTime(){
                var str="${rit.ritTijd}";
                var timestr=str.slice(0,5);
                document.getElementById("time").value = timestr;
            }
            
            function LoadTextBoxDate(){
                var endstr;
                var str="${rit.ritDatum}";
                var year=str.substr(0,4);
                var month='/' + str.substr(5,2) + '/';
                var day=str.substr(8,2);
                endstr=day + month + year;
                endstr = endstr.replace("//","");                               
                document.getElementById("date").value = endstr;
            }
                             
        </script>
    </head>
    <body> 
        <div class="post">
            <h2 class="title">Registreren</h2>
            
            ${newLid.lidId}
            
            <div class="story">
                <form id="registerform" action="Register" method="post">
                <input type="hidden" name="lidId" value="${newLid.lidId}">
                    <table> 
                        <tr>
                            <td><b>Voornaam</b></td>
                            <td><input type="text" name="fname" value="${newLid.lidVnaam}"></td>
                            <td><font style="color: red">${naam}</font></td>
                        </tr>
                        <tr>
                            <td><b>Tussenvoegsel</b></td>
                            <td><input type="text" name="insertion" value="${newLid.lidTussenvoegsel}"></td>
                            <td><font style="color: red">${insert}</font></td>
                        </tr>
                        <tr>
                            <td><b>Achternaam</b></td>
                            <td><input type="text" name="lname" value="${newLid.lidAnaam}"></td>
                            <td><font style="color: red">${name}</font></td>
                        </tr>  
                        <tr>
                            <td><b>Geboortedatum</b></td>
                            <td><input id="date" type="text" name="geboortedatum"  
                                       value="<fmt:formatDate value="${newLid.lidGeboortedatum}" pattern="dd/MM/yyyy"/> "></td>
                            <td><font style="color: red">${geboortedatum}</font></td>
                            <script type="text/javascript">
                            calendar.set("date");
                            LoadTextBoxDate();                           
                        </script>
                        </tr> 
                        <tr>
                            <td><b>Gebruikersnaam</b></td>
                            <td><input type="text" name="username" value="${newLid.lidLogin}"></td>
                            <td><font style="color: red">${user}</font></td>
                        </tr>  
                        <tr>
                            <td><b>Wachtwoord</b></td>
                            <td><input type="password" name="password" value="${newLid.lidPassword}"></td>
                            <td><font style="color: red">${word}</font></td>
                        </tr> 
                        <tr>
                            <td><b>Huis nummer</b></td>
                            <td><input type="text" name="huisnummer" value="${newLid.lidHuisnummer}"></td>
                            <td><font style="color: red">${huis}</font></td>
                        </tr>
                        <tr>
                            <td><b>Provinciale staat</b></td>
                            <td>
                                <select name="state">
                                    <option value="" selected="selected">Kies een provincie</option>
                                    <option value="Limburg">Limburg</option>
                                    <option value="Noord-Brabant">Noord-Brabant</option>
                                    <option value="Zeeland">Zeeland</option>
                                    <option value="Zuid-Holland">Zuid-Holland</option>
                                    <option value="Noord-Holland">Noord-Holland</option>
                                    <option value="Utrecht">Utrecht</option>
                                    <option value="Gelderland">Gelderland</option>
                                    <option value="Flevoland">Flevoland</option>
                                    <option value="Overijssel">Overijssel</option>
                                    <option value="Drenthe">Drenthe</option>
                                    <option value="Friesland">Friesland</option>
                                    <option value="Groningen">Groningen</option>
                                </select>
                            </td><td><font style="color: red">${staat}</font></td>
                        </tr>
                        <tr>
                            <td><b>Postcode</b></td>
                            <td><input type="text" name="postalcode" value="${newLid.lidPostcode}"></td>
                            <td> <font style="color: red">${post}</font></td>
                        </tr>  
                        <tr>
                            <td><b>E-mail Adres</b></td>
                            <td><input type="text" name="emailAdres" value="${newLid.lidEmail}"></td>
                            <td><font style="color: red">${mail}</font></td>
                        </tr>  
                        <tr>
                            <td></td>
                            <td><input type="submit" name="submit" value="Register"></td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
    </body>
</html>


